<template>
  <div class="navbar">
    <div class="back" @click="$router.back()">&lt;返回</div>
    <div class="title">{{ $route.meta.title }}</div>
    <div class="share iconfont" @click="showShare = true">&#xe65c;</div>
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />
  </div>
</template>

<script>
import Vue from 'vue'
import { ShareSheet, Toast } from 'vant'

Vue.use(ShareSheet)
Vue.use(Toast)

export default {
  name: 'Navbar',
  data () {
    return {
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享链接', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' }
      ]
    }
  },
  methods: {
    onSelect (option) {
      Toast(option.name)
      this.showShare = false
    }
  }
}
</script>

<style lang="scss" scoped>
  .navbar {
    display: flex;
    height: 40px;
    box-sizing: border-box;
    padding: 10px;
    align-items: center;
    .back {
      width: 40px;
      text-align: center;
      line-height: 40px;
      font-size: 14px;
      font-weight: 700;
      color: #fff;
      font-weight: 300;
    }

    .title {
      flex: 1;
      text-align: center;
      line-height: 40px;
      color: #fff;
      font-size: 14px;
      margin-right: 10px;
    }
    .share{
      color: #fff;
      font-size: 20px;
    }
  }
  @font-face {
  font-family: 'iconfont';  /* project id 1878217 */
  src: url('//at.alicdn.com/t/font_1878217_litcd0oodo.eot');
  src: url('//at.alicdn.com/t/font_1878217_litcd0oodo.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1878217_litcd0oodo.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1878217_litcd0oodo.woff') format('woff'),
  url('//at.alicdn.com/t/font_1878217_litcd0oodo.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1878217_litcd0oodo.svg#iconfont') format('svg');
}
</style>
